<template>
  <div class="main">
    <el-form ref="form" :model="ruleForm" label-width="120px">
      <el-form-item label="管理员姓名" :rules="{
        required:true,
        message:'管理员姓名不能为空',
        trigger:'blur'
      }">
        <el-input v-model="ruleForm.username"></el-input>
      </el-form-item>
      <el-form-item label="新密码" class="pass-form-item">
        <el-switch v-model="ruleForm.openPassword"></el-switch>
      </el-form-item>
      <el-form-item label="密码" v-if="ruleForm.openPassword" :rules="{
        required:true,
        message:'密码不能为空',
        trigger:'blur'
      }">
        <el-input type="password" v-model="ruleForm.password"></el-input>
      </el-form-item>
      <el-form-item label="重复密码" v-if="ruleForm.openPassword" :rules="{
        required:true,
        message:'重复密码不能为空',
        trigger:'blur'
      }">
        <el-input type="password" v-model="ruleForm.rePassword"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button @click="goBack">返回列表页</el-button>
        <el-button @click="submit">提交</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
import { getAdminDetailById ,updateAdmin } from '@/api/setting.js'
export default {
  data(){
    return {
      ruleForm:{
        id:'',
        username:'',
        openPassword:false,
        password:'',
        rePassword:''
      }
    }
  },
  mounted(){
    this.init()
  },
  methods:{
    async init(){
      console.log('this.$route:',this.$route)
      let id = this.$route.query.id
      if(id){
        let res = await getAdminDetailById(id)
        this.ruleForm.id = id
        this.ruleForm.username=res.data.username
      }
      
    },
    async submit(){
      this.$refs.form.validate(async (valid)=>{
        if(valid){
          if(this.ruleForm.openPassword){
            if(!this.ruleForm.password){
              this.$message({
                type:'error',
                message:'密码不能为空'
              })
              return
            }else if(this.ruleForm.password !== this.ruleForm.rePassword){
              this.$message({
                type:'error',
                message:'两次密码不同，请重新输入'
              })
              return
            }
          }
          
          // 不需要修改密码
          let data = Object.assign({},this.ruleForm)
          // 删除无用的字段
          delete data.openPassword
          delete data.rePassword
          if(!this.ruleForm.openPassword){
            delete data.password
          }

          let res = await updateAdmin(data)

          console.log('res:',res)
          if(res.code === 0){
            this.$message({
              type:'success',
              message:'更新成功'
            })
            this.init()
          }
        }
      })
      
    },
    goBack(){
      this.$router.push('/setting/admin')
    }
  }
}
</script>
<style lang="scss" scoped>
.main{
  .el-form{
    width: 500px;
    .pass-form-item{
      &:deep(.el-form-item__content){
        text-align: left;
      }
    }
  }
}
</style>
